<template>
  <zero-dialog :showDialog.sync="dialog.open" :width="dialog.width" :title="dialog.title"
               :fullscreen.sync="dialog.fullscreen" :id="dialog.id"
               :submit="submitFormHandle">
    <div slot="body">
      <vxe-form :ref="form.ref" :data="form.info" :rules="form.rules" title-align="right" title-width="60">
        <vxe-form-item title="名称" field="name" span="24" :item-render="{}">
          <template #default="{ data }">
            <vxe-input max-length="50" v-model="data.name" showWordCount clearable placeholder="请输入名称"/>
          </template>
        </vxe-form-item>
        <vxe-form-item title="编码" field="code" span="24" :item-render="{}">
          <template #default="{ data }">
            <vxe-input max-length="50" v-model="data.code" :showWordCount="!form.updateDisabled.code" clearable
                       :disabled="form.updateDisabled.code" placeholder="请输入编码"/>
          </template>
        </vxe-form-item>
        <vxe-form-item title="值" field="value" span="24" :item-render="{}"
                       :title-prefix='{ content: "如果是boolean值[\"true\", \"yes\", \"y\", \"t\", \"ok\", \"1\", \"on\", \"是\", \"对\", \"真\", \"對\", \"√\"]返回true\r\n" +
                            "[\"false\", \"no\", \"n\", \"f\", \"0\", \"off\", \"否\", \"错\", \"假\", \"錯\", \"×\"]返回false\r\n" +
                             "其他情况根据业务情况处理。", icon: "vxe-icon-question-circle-fill" }'>
          <template #default="{ data }">
            <vxe-input max-length="50" v-model="data.value" showWordCount clearable placeholder="请输入值"/>
          </template>
        </vxe-form-item>
        <vxe-form-item title="备注" field="remarks" span="24" :item-render="{}">
          <template #default="{ data }">
            <vxe-textarea maxlength="255" v-model="data.remarks" showWordCount clearable placeholder="请输入备注"
                          rows="6"/>
          </template>
        </vxe-form-item>

        <vxe-form-item title="头像" field="picList" span="24" :item-render="{}">
          <template #default="{data}">
            <upload-image :picList.sync="data.picList" :listLengthTag.sync="uploadImage.listLengthTag"
                          :limit.sync="uploadImage.limit"></upload-image>
          </template>
        </vxe-form-item>

        <vxe-form-item title="头像1" field="pic1" span="24" :item-render="{}">
          <template #default="{data}">
            <upload-image :picList.sync="data.pic1" :listLengthTag.sync="uploadImage2.listLengthTag"
                          :limit.sync="uploadImage2.limit"></upload-image>
          </template>
        </vxe-form-item>
      </vxe-form>
    </div>
  </zero-dialog>
</template>


<script>
import addUpdate from '@/mixins/add-update.js';
import ImageViewer from "element-ui/packages/image/src/image-viewer";
import uploadImage from './upload-image.vue'

export default {
  name: 'addUpdateForm',
  components: {
    ImageViewer, uploadImage
  },
  mixins: [addUpdate],
  data() {
    return {
      addUrl: '/sysConfig',
      updateUrl: '/sysConfig',
      byIdUrl: '/sysConfig',
      dialog: {
        width: '800px', //定义宽度
      },
      form: {//表单数据
        rules: { //表单验证
          name: [{required: true, message: "名称不能为空", trigger: "blur"}],
          code: [{required: true, message: "编码不能为空", trigger: "blur"}],
          value: [{required: true, message: "值不能为空", trigger: "blur"}]
        },
        updateDisabled: {code: false}, //修改需要禁用的字段
      },
      uploadImage: {
        listLengthTag: 0, //判断是否达到最大，达到最大隐藏最后一个上传框
        limit: 3,
      },
      uploadImage2: {
        listLengthTag: 0, //判断是否达到最大，达到最大隐藏最后一个上传框
        limit: 1,
      },
    }
  },
  methods: {
    submitFormHandle() {
      let data = JSON.parse(JSON.stringify(this.form.info))
      if (this.form.info.picList && this.form.info.picList.length > 0) {
        data.picJson = data.picList.map((item, index) => item.url)
        delete data.picList
      } else {
        data.picJson = []
      }
      if (this.form.info.pic1 && this.form.info.pic1.length > 0) {
        data.pic = data.pic1[0].url
        delete data.pic1
      } else {
        data.pic = ""
      }
      this.submitForm(data)
    }
  }
}
</script>
